<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>上传文稿 - 文墨勘</title>
    <script src="https://unpkg.byted-static.com/coze/space_ppt_lib/1.0.3-alpha.12/lib/tailwindcss.js"></script>
    <script src="https://unpkg.byted-static.com/fortawesome/fontawesome-free/6.7.2/js/all.min.js" data-auto-replace-svg="nest"></script>
    <script>
        tailwind.config = {
            theme: {
                extend: {
                    colors: {
                        primary: '#F4EFEB',
                        secondary: '#EAD2BE', 
                        accent: '#70533B',
                        'text-primary': '#2D2D2D',
                        'text-secondary': '#6B7280',
                        'bg-card': '#FFFFFF',
                        'border-light': '#F3F4F6'
                    },
                    fontFamily: {
                        'chinese': ['-apple-system', 'BlinkMacSystemFont', 'PingFang SC', 'Hiragino Sans GB', 'Microsoft YaHei', 'sans-serif']
                    },
                    boxShadow: {
                        'card': '0 2px 8px rgba(0, 0, 0, 0.04)',
                        'button': '0 4px 12px rgba(112, 83, 59, 0.15)'
                    }
                }
            }
        }
    </script>
    <style>
        .gradient-bg {
            background: linear-gradient(135deg, #F4EFEB 0%, #EAD2BE 100%);
        }
        
        .card-hover:active {
            transform: scale(0.98);
            transition: transform 0.1s ease;
        }
        
        .upload-button:active {
            transform: translateY(1px);
            box-shadow: 0 2px 8px rgba(112, 83, 59, 0.2);
        }
        
        .file-drop-zone {
            border: 2px dashed #EAD2BE;
            transition: all 0.3s ease;
        }
        
        .file-drop-zone:hover {
            border-color: #70533B;
            background-color: rgba(112, 83, 59, 0.02);
        }
        
        .file-drop-zone.dragover {
            border-color: #70533B;
            background-color: rgba(112, 83, 59, 0.05);
        }
        
        .remove-button:active {
            transform: scale(0.95);
        }
        
        .start-button:active {
            transform: translateY(1px);
        }
        
        .safe-bottom {
            padding-bottom: env(safe-area-inset-bottom);
        }
        
        .status-bar {
            height: env(safe-area-inset-top, 44px);
            background: linear-gradient(135deg, #F4EFEB 0%, #EAD2BE 100%);
        }
        
        .progress-bar {
            transition: width 0.3s ease;
        }
    </style>
</head>
<body class="bg-primary font-chinese">
    <!-- iOS状态栏 -->
    <div id="status-bar" class="status-bar flex justify-between items-center px-6 text-sm font-medium text-accent">
        <span>9:41</span>
        <div class="flex items-center space-x-1">
            <i class="fas fa-signal text-xs"></i>
            <i class="fas fa-wifi text-xs"></i>
            <i class="fas fa-battery-three-quarters text-xs"></i>
        </div>
    </div>

    <!-- 主要内容区域 -->
    <div id="main-content" class="min-h-screen pb-6">
        <!-- 顶部标题区域 -->
        <header id="page-header" class="gradient-bg px-6 py-6">
            <div class="flex items-center justify-between">
                <button id="back-button" class="w-10 h-10 bg-bg-card rounded-xl flex items-center justify-center shadow-card">
                    <i class="fas fa-arrow-left text-accent"></i>
                </button>
                <h1 id="page-title" class="text-xl font-semibold text-accent">上传文稿</h1>
                <div class="w-10"></div> <!-- 占位元素，保持标题居中 -->
            </div>
        </header>

        <!-- 文件上传区域 -->
        <section id="upload-area" class="px-6 -mt-4 mb-8">
            <div id="file-drop-zone" class="bg-bg-card rounded-2xl p-8 text-center shadow-card file-drop-zone">
                <div id="upload-icon" class="w-20 h-20 bg-secondary rounded-2xl flex items-center justify-center mx-auto mb-4">
                    <i class="fas fa-cloud-upload-alt text-accent text-3xl"></i>
                </div>
                <h2 id="upload-title" class="text-lg font-semibold text-text-primary mb-2">选择文稿文件</h2>
                <p id="upload-description" class="text-sm text-text-secondary mb-6">支持 .txt、.docx、.pdf 格式，可批量上传</p>
                <button id="select-files-button" class="bg-accent text-white px-6 py-3 rounded-xl font-medium upload-button">
                    <i class="fas fa-folder-open mr-2"></i>
                    选择文件
                </button>
                <input type="file" id="file-input" multiple accept=".txt,.docx,.pdf" class="hidden">
            </div>
        </section>

        <!-- 已选择文件列表 -->
        <section id="selected-files-section" class="px-6 mb-8 hidden">
            <div class="flex items-center justify-between mb-4">
                <h3 id="selected-files-title" class="text-lg font-semibold text-text-primary">已选择文件</h3>
                <button id="clear-all-button" class="text-sm text-text-secondary">
                    <i class="fas fa-trash mr-1"></i>
                    清空
                </button>
            </div>
            
            <div id="selected-files-list" class="space-y-3">
                <!-- 文件项将通过JavaScript动态添加 -->
            </div>
        </section>

        <!-- 上传进度区域 -->
        <section id="upload-progress-section" class="px-6 mb-8 hidden">
            <div class="bg-bg-card rounded-2xl p-6 shadow-card">
                <div class="flex items-center justify-between mb-3">
                    <span id="progress-text" class="text-sm font-medium text-text-primary">正在上传...</span>
                    <span id="progress-percentage" class="text-sm text-accent">0%</span>
                </div>
                <div class="w-full bg-gray-200 rounded-full h-2">
                    <div id="progress-bar" class="bg-accent h-2 rounded-full progress-bar" style="width: 0%"></div>
                </div>
            </div>
        </section>

        <!-- 开始校对按钮 -->
        <section id="action-section" class="px-6">
            <button id="start-review-button" class="w-full bg-accent text-white py-4 rounded-2xl font-semibold text-lg shadow-button start-button disabled:opacity-50 disabled:cursor-not-allowed" disabled>
                <i class="fas fa-magic mr-2"></i>
                开始校对
            </button>
            <p id="start-button-description" class="text-center text-sm text-text-secondary mt-3">
                选择文件后即可开始智能校对
            </p>
        </section>

        <!-- 支持格式说明 -->
        <section id="format-info" class="px-6 mt-8">
            <div class="bg-bg-card rounded-2xl p-4 shadow-card">
                <h4 class="font-medium text-text-primary mb-3">
                    <i class="fas fa-info-circle text-accent mr-2"></i>
                    支持格式
                </h4>
                <div class="grid grid-cols-3 gap-3 text-center">
                    <div class="p-3 bg-primary rounded-xl">
                        <i class="fas fa-file-alt text-accent text-xl mb-2"></i>
                        <p class="text-xs text-text-secondary">.txt</p>
                    </div>
                    <div class="p-3 bg-primary rounded-xl">
                        <i class="fas fa-file-word text-accent text-xl mb-2"></i>
                        <p class="text-xs text-text-secondary">.docx</p>
                    </div>
                    <div class="p-3 bg-primary rounded-xl">
                        <i class="fas fa-file-pdf text-accent text-xl mb-2"></i>
                        <p class="text-xs text-text-secondary">.pdf</p>
                    </div>
                </div>
            </div>
        </section>
    </div>

    <script>
        document.addEventListener('DOMContentLoaded', function() {
            let selectedFiles = [];
            
            // 返回按钮点击事件
            document.querySelector('#back-button').addEventListener('click', function() {
                window.location.href = 'P-HOME.html';
            });

            // 文件选择按钮点击事件
            document.querySelector('#select-files-button').addEventListener('click', function() {
                document.querySelector('#file-input').click();
            });

            // 文件输入变化事件
            document.querySelector('#file-input').addEventListener('change', function(e) {
                handleFiles(e.target.files);
            });

            // 清空所有文件
            document.querySelector('#clear-all-button').addEventListener('click', function() {
                clearAllFiles();
            });

            // 开始校对按钮点击事件
            document.querySelector('#start-review-button').addEventListener('click', function() {
                if (selectedFiles.length > 0) {
                    uploadFilesAndRedirect();
                }
            });

            // 处理文件选择
            function handleFiles(files) {
                for (let file of files) {
                    // 检查文件格式
                    const allowedTypes = ['.txt', '.docx', '.pdf'];
                    const fileName = file.name.toLowerCase();
                    const fileExtension = '.' + fileName.split('.').pop();
                    
                    if (!allowedTypes.includes(fileExtension)) {
                        alert(`文件 "${file.name}" 格式不支持，请选择 .txt、.docx 或 .pdf 文件`);
                        continue;
                    }
                    
                    // 检查是否已选择过该文件
                    if (selectedFiles.some(selectedFile => selectedFile.name === file.name && selectedFile.size === file.size)) {
                        alert(`文件 "${file.name}" 已在列表中`);
                        continue;
                    }
                    
                    selectedFiles.push(file);
                }
                
                updateFileList();
                updateStartButton();
            }

            // 更新文件列表显示
            function updateFileList() {
                const filesList = document.querySelector('#selected-files-list');
                const section = document.querySelector('#selected-files-section');
                
                if (selectedFiles.length === 0) {
                    section.classList.add('hidden');
                    return;
                }
                
                section.classList.remove('hidden');
                filesList.innerHTML = '';
                
                selectedFiles.forEach((file, index) => {
                    const fileItem = document.createElement('div');
                    fileItem.className = 'bg-bg-card rounded-xl p-4 shadow-card border border-border-light';
                    fileItem.innerHTML = `
                        <div class="flex items-center justify-between">
                            <div class="flex items-center space-x-3">
                                <div class="w-10 h-10 bg-secondary rounded-lg flex items-center justify-center">
                                    <i class="fas fa-file-${getFileIcon(file.name)} text-accent"></i>
                                </div>
                                <div>
                                    <h4 class="font-medium text-text-primary text-sm truncate max-w-48">${file.name}</h4>
                                    <p class="text-xs text-text-secondary">${formatFileSize(file.size)} • ${getFileExtension(file.name)}</p>
                                </div>
                            </div>
                            <button class="remove-file-button w-8 h-8 bg-red-100 rounded-lg flex items-center justify-center remove-button" data-index="${index}">
                                <i class="fas fa-times text-red-500 text-sm"></i>
                            </button>
                        </div>
                    `;
                    
                    filesList.appendChild(fileItem);
                    
                    // 添加删除按钮事件
                    fileItem.querySelector('.remove-file-button').addEventListener('click', function() {
                        const index = parseInt(this.dataset.index);
                        removeFile(index);
                    });
                });
            }

            // 移除单个文件
            function removeFile(index) {
                selectedFiles.splice(index, 1);
                updateFileList();
                updateStartButton();
            }

            // 清空所有文件
            function clearAllFiles() {
                selectedFiles = [];
                updateFileList();
                updateStartButton();
            }

            // 更新开始校对按钮状态
            function updateStartButton() {
                const button = document.querySelector('#start-review-button');
                const description = document.querySelector('#start-button-description');
                
                if (selectedFiles.length > 0) {
                    button.disabled = false;
                    button.classList.remove('disabled:opacity-50', 'disabled:cursor-not-allowed');
                    description.textContent = `已选择 ${selectedFiles.length} 个文件，点击开始校对`;
                } else {
                    button.disabled = true;
                    button.classList.add('disabled:opacity-50', 'disabled:cursor-not-allowed');
                    description.textContent = '选择文件后即可开始智能校对';
                }
            }

            // 文件上传并跳转
            function uploadFilesAndRedirect() {
                // 显示上传进度
                showUploadProgress();
                
                // 模拟上传进度
                simulateUploadProgress(() => {
                    // 上传完成后跳转到校对设置页面
                    const fileNames = selectedFiles.map(file => file.name).join(',');
                    window.location.href = `P-SETTINGS.html?files=${encodeURIComponent(fileNames)}`;
                });
            }

            // 显示上传进度
            function showUploadProgress() {
                const section = document.querySelector('#upload-progress-section');
                section.classList.remove('hidden');
            }

            // 模拟上传进度
            function simulateUploadProgress(callback) {
                let progress = 0;
                const progressBar = document.querySelector('#progress-bar');
                const progressText = document.querySelector('#progress-text');
                const progressPercentage = document.querySelector('#progress-percentage');
                
                const interval = setInterval(() => {
                    progress += Math.random() * 15 + 5; // 随机增加5-20%
                    
                    if (progress >= 100) {
                        progress = 100;
                        clearInterval(interval);
                        
                        progressText.textContent = '上传完成';
                        progressBar.style.width = '100%';
                        progressPercentage.textContent = '100%';
                        
                        // 延迟跳转，让用户看到完成状态
                        setTimeout(callback, 500);
                    } else {
                        progressBar.style.width = progress + '%';
                        progressPercentage.textContent = Math.round(progress) + '%';
                    }
                }, 200);
            }

            // 获取文件图标
            function getFileIcon(fileName) {
                const extension = fileName.toLowerCase().split('.').pop();
                switch (extension) {
                    case 'txt': return 'alt';
                    case 'docx': return 'word';
                    case 'pdf': return 'pdf';
                    default: return 'file';
                }
            }

            // 获取文件扩展名
            function getFileExtension(fileName) {
                const parts = fileName.split('.');
                return parts.length > 1 ? '.' + parts.pop().toUpperCase() : '';
            }

            // 格式化文件大小
            function formatFileSize(bytes) {
                if (bytes === 0) return '0 Bytes';
                const k = 1024;
                const sizes = ['Bytes', 'KB', 'MB', 'GB'];
                const i = Math.floor(Math.log(bytes) / Math.log(k));
                return parseFloat((bytes / Math.pow(k, i)).toFixed(2)) + ' ' + sizes[i];
            }

            // 拖拽上传功能
            const dropZone = document.querySelector('#file-drop-zone');
            
            dropZone.addEventListener('dragover', function(e) {
                e.preventDefault();
                this.classList.add('dragover');
            });
            
            dropZone.addEventListener('dragleave', function(e) {
                e.preventDefault();
                this.classList.remove('dragover');
            });
            
            dropZone.addEventListener('drop', function(e) {
                e.preventDefault();
                this.classList.remove('dragover');
                handleFiles(e.dataTransfer.files);
            });
        });
    </script>
</body>
</html>